<template>
  <div style="padding-top: 1px;min-height:300px;">
    <div class="item" v-for="item in courseList" :key="item.id">
      <div class="courseName">{{item.classId}}</div>
      <div class="time">
        <div class="totalTime" style="width: 465px;margin-right: 10px;">总课时：{{item.classTime}}</div>
        <div class="classSurplusTime">剩余课时：{{item.classSurplusTime}}</div>
      </div>
      <div class="date">
        <div class="startTime" style="width: 465px;margin-right: 10px;">课程开始时间：{{item.startTime}}</div>
        <div class="endTime">课程结束时间：{{item.endTime}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCourseList } from "@/api/school/student";
export default {
  data() {
    return {
      courseList: [
        {
          id: '', // 购买课程id
          classId: '',
          classTime: '', // 总课时
          startTime: '',
          endTime: '',
          classSurplusTime: '', // 剩余课时
        }
      ]
    }
  },
  methods: {
    getData() {
      this.getCourseList()
    },
    // 获取报读课程
    getCourseList() {
      getCourseList(this.$route.query.id).then(res => {
        console.log(res)
        this.courseList = res.data
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .item {
    box-shadow: 0px 2px 8px 0px rgba(150, 150, 150, 0.2);
    margin: 0px 3px 20px;
    padding: 20px;
    box-sizing: border-box;
    color: #737373;
    .courseName {
      font-size: 16px;
      color: #333;
      font-weight: 600;
    }
    .time {
      display: flex;
      align-items: center;
      margin: 20px 0px;
    }
    .date {
      display: flex;
      align-items: center;
    }
  }
</style>